<!-- src/components/DataChart/PieChart.vue -->
<template>
    <div ref="chartContainer" class="pie-chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

// 定义数据项接口
interface PieDataItem {
    name: string;
    value: number | string;
    itemStyle?: {
        color?: string;
        [key: string]: any;
    };
    [key: string]: any;
}

// 定义组件属性（全部设为可选以提高灵活性）
interface Props {
    // 图表标题
    title?: string;
    // 数据系列
    seriesData?: PieDataItem[];
    // 图表高度
    height?: string;
    // 图表宽度
    width?: string;
    // 是否显示图例
    showLegend?: boolean;
    // 图例位置
    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
    //RoseType: 'radius' | 'area',默认为null
    roseType?: 'null' | 'radius' | 'area';
    // 自定义颜色数组
    colors?: string[];
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
    title: '',
    seriesData: () => [],
    height: '400px',
    width: '100%',
    showLegend: true,
    legendPosition: 'bottom',
    roseType: 'null',
    colors: () => []
});

const chartContainer = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 默认颜色调色板
const defaultColors = [
    '#5470c6', // 蓝色
    '#d65a8d', // 玫红色（偏紫的玫红色）
    '#ee6666', // 红色
    '#91cc75', // 浅绿色
    '#fac858', // 黄色
    '#73c0de', // 浅蓝色
    '#3ba272', // 绿色
    '#fc8452', // 橙色
    '#9a60b4', // 紫色
    '#ea7ccc'  // 粉色
];

// 初始化图表
const initChart = async () => {
    if (!chartContainer.value) return;

    myChart = echarts.init(chartContainer.value);
    updateChart();
};

// 更新图表
const updateChart = async () => {
    if (!myChart) return;

    try {
        // 合并颜色数组：优先使用props.colors，其次使用默认颜色
        const colorPalette = props.colors && props.colors.length > 0 ? props.colors : defaultColors;

        // 处理数据项颜色
        const processedData = props.seriesData?.map((item, index) => {
            // 如果数据项本身定义了颜色，则使用数据项的颜色，否则使用调色板颜色
            if (!item.itemStyle || !item.itemStyle.color) {
                return {
                    ...item,
                    itemStyle: {
                        color: colorPalette[index % colorPalette.length]
                    }
                };
            }
            return item;
        }) || [];

        const option = {
            title: {
                text: props.title,
                left: 'center',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            legend: props.showLegend ? {
                show: true,
                top: props.legendPosition === 'top' ? 'top' :
                    props.legendPosition === 'bottom' ? 'bottom' : 'center',
                left: props.legendPosition === 'left' ? 'left' :
                    props.legendPosition === 'right' ? 'right' : 'center',
                orient: (props.legendPosition === 'top' || props.legendPosition === 'bottom') ?
                    'horizontal' : 'vertical'
            } : {
                show: false
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: props.title || '数据',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    data: processedData,
                    // 开启玫瑰图模式
                    roseType: props.roseType === 'null' ? false : props.roseType,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        borderRadius: 4,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    labelLine: {
                        show: true
                    }
                }
            ]
        };

        myChart.setOption(option);
    } catch (error) {
        console.error('更新图表失败:', error);
    }
};

// 窗口大小调整处理
const handleResize = () => {
    if (myChart) {
        myChart.resize();
    }
};

// 监听属性变化
watch(() => [
    props.seriesData,
    props.title,
    props.showLegend,
    props.legendPosition,
    props.colors
], () => {
    updateChart();
});

onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    if (myChart) {
        myChart.dispose();
    }
});
</script>

<style scoped>
.pie-chart-container {
    width: v-bind(width);
    height: v-bind(height);
    margin: 0 auto;
}
</style>